<template>
	<view>
		<!-- 轮播图  -->
		<view>
			<gui-swiper :swiperItems="swiperItems" :spacing="0" :padding="0" borderRadius="0rpx" :width="750"
				:height="330"></gui-swiper>
		</view>
		<!-- 商品标题 分享按钮 -->
		<view class="gui-list gui-padding">
			<view class="gui-list-items">
				<view class="gui-list-image ucenter-face gui-relative">
					<image class="gui-list-image ucenter-face-image"
						src="https://images.unsplash.com/photo-1662695094714-966fc339a2e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNnx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80"
						mode="aspectFill"></image>
				</view>
				<view class="gui-list-body">
					<view class="gui-list-title">
						<text class="gui-list-title-text gui-primary-color">小雪（助教）</text>
					</view>
					<text class="gui-list-body-desc gui-color-gray gui-block">擅长方向：中式黑八台球、美式台球</text>
					<text class="gui-list-body-desc gui-color-gray gui-block">工作经验：3年</text>
				</view>

			</view>
		</view>


		<view style="margin-top:20rpx;margin-left: 20rpx;" class="gui-padding-x  gui-color-black">
			<navigator class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-red">&#xe64c;</text>
				<view class="gui-list-body gui-border-b">
					<view class="gui-list-title">
						<text class="gui-list-title-text gui-primary-color">可约时段</text>
						<text class="gui-list-title-desc gui-color-gray"></text>
					</view>
					<text class="gui-list-body-desc gui-color-gray">周日10:00~20:00</text>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray-light">&#xe601;</text>
			</navigator>

			<navigator class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-red">&#xe63b;</text>
				<view class="gui-list-body gui-border-b">
					<view class="gui-list-title">
						<text class="gui-list-title-text gui-primary-color">可约门店（1家）</text>
						<text class="gui-list-title-desc gui-color-gray"></text>
					</view>
					<text class="gui-list-body-desc gui-color-gray">25km | 名仕台球金融港店</text>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray-light">&#xe601;</text>
			</navigator>
		</view>


		<view style="margin-top:50rpx;margin-left: 20rpx;" class="gui-padding-x  gui-color-gray">
			<text class="gui-bold">预约说明</text>
		</view>

		<view style="margin-top:50rpx;margin-left: 20rpx;" class="gui-padding-x  gui-color-gray">
			<text class="gui-text-small gui-bold">预约当天时间，提前2小时取消，退还全部预约费用</text>
		</view>
		<view style="margin-top:20rpx;margin-left: 20rpx;" class="gui-padding-x  gui-color-gray">
			<text class="gui-text-small gui-bold">预约当天时间，未提前2小时取消，扣除全部预约费用</text>
		</view>
		<view style="margin-top:20rpx;margin-left: 20rpx;" class="gui-padding-x  gui-color-gray">
			<text class="gui-text-small gui-bold">预约非当天时间，非当天时间取消，退还全部预约费用</text>
		</view>
		<view style="margin-top:20rpx;margin-left: 20rpx;" class="gui-padding-x  gui-color-gray">
			<text class="gui-text-small gui-bold">预约非当天时间，当天时间取消，扣除全部预约费用</text>
		</view>
		<view style="margin-top:20rpx;margin-left: 20rpx;" class="gui-padding-x  gui-color-gray">
			<text class="gui-text-small gui-bold">助教未提供助教服务，请及时联系店长或平台</text>
		</view>


		<!-- 2个大按钮 -->
		<view class="gui-flex gui-rows gui-space-between gui-align-items-center gui-margin-top-large" style="margin-top: 240rpx;">
			<view class="gui-flex1 gui-footer-large-buttons gui-flex gui-rows gui-nowrap gui-justify-content-end">
				<view style="flex: 1;padding-top: 24rpx;">
					<text class="gui-text" style="font-size: 32rpx;line-height:32rpx;font-weight:  bold;height: 32rpx;">￥38/小时</text>
				</view>
				<view class=" gui-footer-large-button gui-text-center gui-bg-add-card"
					style="border-bottom-left-radius:50rpx; border-top-left-radius:50rpx;" hover-class="gui-tap">
					<text class="gui-text gui-color-white gui-footer-large-button-text">分享</text>
				</view>
				<view class="gui-footer-large-button gui-text-center gui-bg-buy"
					style="border-bottom-right-radius:50rpx; border-top-right-radius:50rpx;" hover-class="gui-tap">
					<text class="gui-text gui-color-white gui-footer-large-button-text">约TA</text>
				</view>
			</view>
		</view>


		<!-- 底部占位 -->
		<view style="height:120rpx;"></view>
	</view>
</template>
<script>
	var face =
		"https://images.unsplash.com/photo-1663717249250-804cb861ed74?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5M3x8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80";
	var img =
		"https://images.unsplash.com/photo-1657310217094-2214abf4fd88?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxNTN8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=600&q=60";
	export default {
		data() {
			return {
				commentContents: [{
						"content": "故国三千里，深宫二十年。一声何满子，双泪落君前。",
						"name": "回复昵称",
						"face": face,
						"date": "08/10 08:00",
						"praise": 188,
						"isPraise": false,
						"Reply": [{
								'name': "张晓曦",
								"content": "不错不错"
							},
							{
								'name': "王大陆",
								"content": "赞了~"
							},
						]
					},
					{
						"content": "而今渐行渐远，渐觉虽悔难追。漫寄消寄息，终久奚为。也拟重论缱绻，争奈翻覆思维。纵再会，只恐恩情，难似当时。",
						"name": "路过繁华",
						"face": face,
						"date": "02/10 18:00",
						"praise": 288
					},
				],
				imgUrl: "https://images.unsplash.com/photo-1663697651653-68fe83aa6f30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=100&q=90",
				// 轮播图 
				swiperItems: [{
						img: 'https://images.unsplash.com/photo-1657310209858-f958a8e44d51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60',
						url: '',
						opentype: 'navigate'
					},
					{
						img: 'https://images.unsplash.com/photo-1657310209858-f958a8e44d51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60',
						url: '',
						opentype: 'navigate'
					}
				],
				// 切换导航
				navItems: [{
					id: 0,
					name: '商品详情'
				}, {
					id: 1,
					name: '相关评论'
				}],
				// 切换索引
				active: 0,
				// 属性选择
				attrShow: false,
				colors: [{
						id: 1,
						text: "红色",
						checked: false
					},
					{
						id: 2,
						text: "黑色",
						checked: false
					},
					{
						id: 3,
						text: "蓝色",
						checked: false
					}
				],
				sizes: [{
						id: 1,
						text: "10 cm",
						checked: false
					},
					{
						id: 2,
						text: "20 cm",
						checked: false
					},
					{
						id: 3,
						text: "40 cm",
						checked: false
					}
				],
				// 属性记录
				attrRes: {
					color: null,
					size: null,
					number: 1
				},
				// 商品信息
				product: {
					name: "名仕台球（光谷金融港店）",
					logo: "../../static/logo.png",
					price: 3188,
					priceMarket: 3200,
					time: "10:00-23:00",
					imgs: [
						'https://img30.360buyimg.com/sku/jfs/t21838/18/2275707529/311540/cba1d04c/5b4f155fNac3aa2f0.jpg',
						'https://img30.360buyimg.com/sku/jfs/t22021/327/2281785192/48707/57806074/5b4f1579Nae7adb49.jpg',
						'https://img30.360buyimg.com/sku/jfs/t21682/256/2344553276/204456/cf7a2ddb/5b4ffbbfN48c54307.jpg'
					],
					address: "湖北省武汉市东湖高新区光谷金融港B2栋F1"
				},
				artciles: [{
						"id": 1,
						"title": "这是一条动态11111111111111111111111111111111111111111111",
						"imgs": [
							"https://images.unsplash.com/photo-1657310209858-f958a8e44d51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60",
							"https://images.unsplash.com/photo-1657310209858-f958a8e44d51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
						],
						"author": "小雪",
						"views": 320,
						"createTime": "2024-03-10"
					},
					{
						"id": 2,
						"title": "这是一条动态222222222222222222222222222222222222",
						"imgs": [
							"https://images.unsplash.com/photo-1657310209858-f958a8e44d51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60",
							"https://images.unsplash.com/photo-1657310209858-f958a8e44d51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
						],
						"author": "小李",
						"views": 320,
						"createTime": "2024-03-10"
					}
				]
			}
		},
		methods: {
			showImgs: function(commentsIndex, imgIndex) {
				console.log(commentsIndex, imgIndex);
				uni.previewImage({
					urls: this.commentContents[commentsIndex].imgs,
					current: this.commentContents[commentsIndex].imgs[imgIndex]
				})
			},
			// 新闻点击
			newstap: function(e) {
				// 获取新闻 id
				var newsId = e;
				console.log(newsId);
				// 打开新闻详情页面
				//uni.navigateTo()
			},
			// 分享
			share: function() {
				uni.showToast({
					title: '请自行完善分享代码',
					icon: "none"
				});
			},
			// 导航切换
			navChange: function(e) {
				this.active = e;
			},
			// 返回首页
			goHome: function() {
				uni.switchTab({
					url: "首页路径"
				});
			},
			// 返回首页
			kf: function() {
				uni.showToast({
					title: '请自行完善分享代码',
					icon: "none"
				});
			},
			// 加入购物车
			addtocard: function() {
				// 选择属性
				this.selectAttr();
			},
			// 购买 
			buynow: function() {
				// 选择属性
				this.selectAttr();
			},
			// 属性选择
			selectAttr: function() {
				// 未选择属性弹出选择
				if (!this.attrShow) {
					this.attrShow = true;
					return;
				}
				// 已选择属性进行订单提交
				// 属性在 attrRes 变量内保存
				if (this.attrRes.color == null || this.attrRes.size == null) {
					uni.showToast({
						icon: "none",
						title: "请选择属性"
					});
				}
				console.log('请完善提交代码');
			},
			colorChange: function(e) {
				this.attrRes.color = e.text;
			},
			sizeChange: function(e) {
				this.attrRes.size = e.text;
			},
			numberChange: function(e) {
				this.attrRes.number = e[0];
			},
			closeAttr: function() {
				this.attrShow = false;
			}
		}
	}
</script>
<style scoped>
	.product-name {
		width: 560rpx;
		line-height: 50rpx;
	}

	.product-share {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		font-size: 50rpx;
		color: #FF7900;
		line-height: 80rpx;
	}

	.product-price {
		color: #FF7900;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.gui-common-line {
		height: 18rpx;
	}

	.product-footer {
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: 0;
		width: 750rpx;
	}

	.product-attr {
		width: 700rpx;
		margin: 25rpx;
		height: 580rpx;
	}

	/* 卡片视图 */
	.gui-card-view {
		padding: 25rpx;
		margin: 0 30rpx;
		margin-top: 30rpx;
	}

	.gui-card-body {
		padding-bottom: 30rpx;
	}

	.gui-card-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 80rpx;
	}

	.gui-card-desc {
		width: 400rpx;
		margin-left: 25rpx;
		flex: 1;
	}

	.gui-card-name {
		font-size: 28rpx;
		line-height: 40rpx;
		margin-right: 20rpx;
	}

	.gui-card-text {
		line-height: 40rpx;
		font-size: 24rpx;
	}

	.gui-card-footer {
		margin-top: 25rpx;
	}

	.gui-card-footer-item {
		width: 100rpx;
		text-align: center;
		flex: 1;
		line-height: 38rpx;
		font-size: 26rpx;
	}

	.grid4 {
		width: 172rpx;
	}



	/* 您可以在页面的 style 内直接复写样式达到修改的目的 */

	/* #ifndef APP-NVUE */
	.gui-card-footer-item {
		display: block;
	}

	.gui-box-shadow {
		box-shadow: 0px 0px 3rpx #999999;
	}

	/* #endif */


	.gui-comments-items {
		margin-top: 35rpx;
	}

	.gui-comments-face {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		margin-right: 25rpx;
	}

	.gui-comments-body {
		width: 580rpx;
		overflow: hidden;
	}

	.gui-comments-header-text {
		line-height: 40rpx;
	}

	.gui-comments-info {
		margin-top: 2px;
	}

	.gui-comments-info-text {
		font-size: 22rpx;
		line-height: 40rpx;
		margin-top: 10rpx;
	}

	.gui-comments-content {
		line-height: 36rpx;
		font-size: 26rpx;
		padding: 8rpx 0;
	}

	.gui-comments-replay {
		font-size: 24rpx;
		color: #666666;
		border-radius: 3px;
		margin: 3px 0;
		padding: 15rpx;
		line-height: 36rpx;
	}

	.gui-comments-replay-btn {
		font-size: 20rpx;
		line-height: 44rpx;
		padding: 0rpx 20rpx;
		border-radius: 44rpx;
	}

	.gui-comments-imgs {
		margin: 8rpx 0;
	}

	.gui-comments-image {
		width: 180rpx;
		height: 128rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		font-size: 0;
		overflow: hidden;
	}

	.gui-grids-icon {
		color: rgba(69, 90, 100, 0.6);
	}

	.gui-grids-text {
		color: rgba(69, 90, 100, 0.8);
	}
</style>